﻿<!DOCTYPE html>
<html lang="zxx">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta content="" name="description">
        <meta content="" name="keywords">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="HandheldFriendly" content="true">
        <meta content="telephone=no" name="format-detection">
        <!-- favicon -->
        <link rel="shortcut icon" type="image/png" href="favicon.png" />
        <!--[if (gt IE 9)|!(IE)]><!-->
        <!-- custom CSS -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <!-- END custom CSS -->
        <!--<![endif]-->
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <title></title>
    </head>
    <body class="page">
        <div class="wrapper-sticky-footer">
            <div class="content-sticky">
                <!-- Header -->
                {include file="public/header"}
                <!-- END header -->
                <!-- content-->
                <div class="wrap wrap_gray pt20">
                    <div class="container">
                        <div class="row" id="uploadMore">
                            {if count($list) > 0}
                            {foreach name='list' item='vo'}
                            <div class="col-sm-3">
                                <div class="thumbnail thumbnail_small">
                                    <a href="{:url('index/Index/zcDetail')}?id={$vo.zc_id}" class="thumbnail__link">
                                        <img src="{$vo.zc_image}" height="153" width="270" alt="News">
                                    </a>
                                    <div class="caption thumbnail__caption">
                                        <div class="news caption__news">
                                            {if $vo.zc_is_show_video == 2}
                                            <i class="icon-play"></i>
                                            {/if}
                                            <p class="news__category {notempty name='vo.zc_label'}yellow-line{/notempty}">{$vo.zc_label}</p>
                                            <a href="{:url('index/Index/zcDetail')}?id={$vo.zc_id}" class="news__link">
                                                <p class="news__text">{$vo.zc_title}</p>
                                            </a>
                                        </div>
                                        <div class="posted">
                                            <span class="posted__date">{$vo.zc_time}</span>
                                            <ul class="posted__icon">
                                                <li>
                                                    <span>
                                                <i class="icon-comment-empty"></i>{$vo.zc_commnet_num}
                                            </span>
                                                </li>
                                                <li>
                                                    <span>
                                                <i class="icon-eye"></i>{$vo.zc_num}
                                            </span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/foreach}
                            {/if}

                        </div>
                    </div>

                    <div class="ajax_load hidden" id="more">
                        <i class="icon-arrows-cw"></i>Load more
                        <svg width="128" height="40" viewBox="0 0 128 40" xmlns="http://www.w3.org/2000/svg">
                            <rect x='0' y='0' fill='none' width='128' height='40'></rect>
                        </svg>
                    </div>
                </div>
                <!-- END content-->
            </div>
            <!-- Footer -->
            {include file="public/footer"}
        </div>
        <!-- END Footer -->
        <!-- All JavaScript libraries -->
    </body>
</html>
<script>
    var page = 1;
    var url = '{:url("index/Index/zcDetail")}';
    // 加载页面时先判断“更多按钮”
    $.ajax({
       url:'{:url("index/Index/showMore")}',
       type:'post',
       data:{page:page},
       dataType:'json',
       success:function (data) {
            if(data.count > 12){
                $('#more').removeClass('hidden');
            }
       }
    });
    // 下一页
    $('#more').click(function () {
        page++;
        $.ajax({
            url:'{:url("index/Index/moreZc")}',
            type:'post',
            data:{page:page},
            dataType:'json',
            success:function (data) {
                var arrLen = data.data.length;
                if(arrLen <= 0){
                    $('#more').addClass('hidden');
                }else {
                    var datas = data.data;
                    $.each(datas, function(i, item){
                        var _html = '';
                        _html += '<div class="col-sm-3">';
                        _html += '<div class="thumbnail thumbnail_small">';
                        _html += '<a href="' + url + '?id=' + item.zc_id + '" class="thumbnail__link">';
                        _html += '<img src="' + item.zc_image + '" height="153" width="270" alt="News">';
                        _html += '</a>';
                        _html += '<div class="caption thumbnail__caption">';
                        _html += '<div class="news caption__news">';
                        if(item.zc_is_show_video == 2){
                            _html += '<i class="icon-play"></i>';
                        }
                        _html += '<p class="news__category yellow-line">' + item.zc_labe + '</p>';
                        _html += '<a href="' + url + '?id=' + item.zc_id + '" class="news__link">';
                        _html += '<p class="news__text">' + item.zc_title + '</p>';
                        _html += '</a>';
                        _html += '</div>';
                        _html += '<div class="posted">';
                        _html += '<span class="posted__date">' + item.zc_time + '</span>';
                        _html += '<ul class="posted__icon">';
                        _html += '<li>';
                        _html += '<span>';
                        _html += '<i class="icon-comment-empty"></i>' + item.zc_commnet_num;
                        _html += '</span>';
                        _html += '</li>';
                        _html += '<li>';
                        _html += '<span>';
                        _html += '<i class="icon-eye"></i>' + item.zc_num;
                        _html += '</span>';
                        _html += '</li>';
                        _html += '</ul>';
                        _html += '</div>';
                        _html += '</div>';
                        _html += '</div>';
                        _html += '</div>';
                        $('#uploadMore').append(_html);
                    });
                    if(arrLen < 12){
                        $('#more').addClass('hidden');
                    }else {
                        $('#more').removeClass('hidden');
                    }
                }
            }
        });
    })
</script>

